<template>
    <div>
        <h2>商品管理</h2>
        <el-card shadow="never" style="margin-bottom: 14px;">
            <el-form :inline="true" :model="searchData" class="demo-form-inline">
                <el-form-item label="商品分类">
                    <!-- 用的是商品分类的泛型 -->
                        <el-cascader
                        v-model="searchData.classifiesId" 
                        :options="classifyData" :props="{
                            checkStrictly:true,
                            label:'name',
                            value:'_id'
                        }" clearable />
                </el-form-item>

                <el-form-item label="商品搜索">
                    <el-input v-model="searchData.name" placeholder="请输入商品名称/关键字/ID" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never">
            <div style="margin-bottom: 14px;">
                <el-button v-hasPerm="'/goods/handle'" type="primary" @click="openAddGoods">添加商品</el-button>
                <el-button type="danger" @click="SureDeleteBefore">批量删除</el-button>
            </div>
            <!-- 表格渲染 -->
            <BaseTable :checkbox="checkbox" @getDeletData="getDeletData" :data="tableData.rows" :columns="columns"
                v-model="pageData" :total="tableData.total">
                <template #state="{ row }">
                    <el-switch v-model="row.state" inline-prompt :active-value="1" :inactive-value="0" active-text="上架"
                        inactive-text="下架"></el-switch>
                </template>
                <template #action="{ row }">
                    <el-button text
                    v-hasPerm="'/goods/update/:_id'" 
                    type="primary" size="small" @click=updateGoods(row)>编辑</el-button>
                    <el-button text type="danger" size="small">更多</el-button>
                </template>
                <template #image="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.image" fit="cover" />
                </template>
            </BaseTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '../../../api';
import { onMounted, reactive, ref,computed } from 'vue';
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { useFetchData } from '@/hooks/fetchData';
import { classListItem, SeachParams } from '@/api/modules/goodsList';
import { useAdminStore } from '@/store/admin';
const adminStore= useAdminStore();
const router = useRouter();

// 获取公共类型数据
const { getClassifyDataAsync, classifyData } = useFetchData();
onMounted(() => {
    getClassifyDataAsync();
})
// s是否是复选
const checkbox = true
// 多选删除的参数
let deleteArr = ref<classListItem[]>([])
// 定义一个搜索数据
const searchData = ref<SeachParams>({})
// let ruleForm=ref<classListItem>({})
const onSubmit = () => {
    getGoodsListData()
}
let tableData = reactive({
    rows: [],
    total: 0
})
const pageData = ref({
    currentPage: 1,
    pageSize: 10
})

// 表格列配置
const columns = [
    {
        label: '商品ID',
        prop: '_id'
    },
    {
        label: '商品名称',
        prop: 'name'
    },

    {
        label: '排序',
        prop: 'sort'
    },
    {
        label: '商品图',
        prop: 'image'
    },
    {
        label: '商品类型',
        prop: 'type'
    },
    {
        label: '商品售价',
        prop: 'price'
    },
    {
        label: '销量',
        prop: 'sale'
    },
    {
        label: '库存',
        prop: 'stock'
    },
    {
        label: '状态',
        prop: 'state'
    },
    {
        label: '操作',
        prop: 'action'
    },

]
onMounted(() => {
    getGoodsListData();
})
// 分页获取所有商品
const getGoodsListData = () => {
    api.goodsList.search({
        ...searchData.value,
        ...pageData.value
    })
        .then(res => {
            if (res.code == 200) {
                // console.log(res, 44);
                tableData.rows = res.data.rows
                tableData.total = res.data.total;
            }
        })
}
// 商品分页条变化
watch(pageData.value, () => {
    getGoodsListData(), {
        deep: true
    }
})
// 删除前确认删除
const SureDeleteBefore = () => {
    ElMessageBox.confirm(
        '您确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteManyGoods()
    }
    )
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

// 点击打开添加商品
const openAddGoods = () => {
    router.push("/goods/handle")
}
// 失去焦点时触发
watch([searchData, pageData], () => {
    getGoodsListData()
},
    { deep: true }
)
const getDeletData = (data: classListItem[]) => {
    console.log(data, 333);
    deleteArr.value = data
}
// 点击批量删除
const deleteManyGoods = async () => {
    const paramData = deleteArr.value.map(item => item._id)
    const res = await api.goodsList.remove({_id:paramData})
    console.log(res);

    if (res.code == 200) {
        console.log(res);
        getGoodsListData()
        ElMessage.success("商品删除成功")
    }else{
        ElMessage.error(res.message)
    }
}

// 获取按钮的权限设置
const permissionsArr=adminStore.menusData
console.log(permissionsArr);

const menusData=computed(()=>{
    return adminStore.menusData
})

// 点击编辑
const updateGoods=(row:classListItem)=>{
    router.push(`/goods/update/${row._id}`)
    // console.log(row);
}
</script>

<style scoped></style>